<template>
  <div class="gauge-tower-wrapper" :style="containerStyle">
    <v-chart ref="chartRef" :option="chartOption" :style="chartStyle" autoresize />
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue';
import { use } from 'echarts/core';
import * as echarts from 'echarts';
import { CanvasRenderer } from 'echarts/renderers';
import { GaugeChart } from 'echarts/charts';
import { TitleComponent, TooltipComponent, LegendComponent } from 'echarts/components';
import VChart from 'vue-echarts';
import { useAutoDataBinding } from '@/composables/use-data-binding';

// 注册ECharts组件
use([CanvasRenderer, GaugeChart, TitleComponent, TooltipComponent, LegendComponent]);

// Props定义
interface Props {
  value?: number;
  maxValue?: number;
  primaryColor?: string;
  backgroundColor?: string;
  labelColor?: string;
  tickColor?: string;
  dataBinding?: any;
}

const props = withDefaults(defineProps<Props>(), {
  value: 328,
  maxValue: 1000,
  primaryColor: '#468EFD',
  backgroundColor: '#111F42',
  labelColor: '#4d5bd1',
  tickColor: '#468EFD'
});

// 图表引用
const chartRef = ref<InstanceType<typeof VChart>>();

// 响应式属性（用于数据绑定）
const componentProps = computed(() => ({
  value: props.value,
  maxValue: props.maxValue,
  primaryColor: props.primaryColor,
  backgroundColor: props.backgroundColor,
  labelColor: props.labelColor,
  tickColor: props.tickColor
}));

// 数据绑定
const dataBinding = useAutoDataBinding(
  props.dataBinding?.enabled ? props.dataBinding : null,
  componentProps
);

// 样式计算
const containerStyle = computed(() => ({
  width: '100%',
  height: '100%',
  minHeight: '400px'
}));

const chartStyle = computed(() => ({
  width: '100%',
  height: '100%'
}));

// 塔米分仪表盘配置
const chartOption = computed(() => {
  const dataArr = componentProps.value.value;
  const maxValue = componentProps.value.maxValue;
  const primaryColor = componentProps.value.primaryColor;
  const backgroundColor = componentProps.value.backgroundColor;
  const labelColor = componentProps.value.labelColor;
  const tickColor = componentProps.value.tickColor;

  return {
    backgroundColor: '#fff',
    tooltip: {
      show: false
    },
    series: [
      {
        name: '内部进度条',
        type: 'gauge',
        radius: '40%',
        splitNumber: 10,
        axisLine: {
          lineStyle: {
            color: [
              [dataArr / maxValue, primaryColor],
              [1, backgroundColor]
            ],
            width: 8
          }
        },
        axisLabel: {
          show: false
        },
        axisTick: {
          show: false
        },
        splitLine: {
          show: false
        },
        itemStyle: {
          show: false
        },
        detail: {
          formatter: function () {
            return '塔米分';
          },
          offsetCenter: [0, 130],
          textStyle: {
            padding: [0, 0, 0, 0],
            fontSize: 20,
            fontWeight: '700',
            color: '#324063'
          }
        },
        title: {
          show: true,
          offsetCenter: [0, 90],
          textStyle: {
            color: '#2D99FF',
            fontSize: 40,
            fontWeight: 700,
            fontFamily: 'PingFangSC'
          }
        },
        data: [
          {
            name: dataArr,
            value: dataArr / 10
          }
        ],
        pointer: {
          show: true,
          length: '75%',
          radius: '20%',
          width: 10
        },
        animationDuration: 4000
      },
      {
        name: '外部刻度',
        type: 'gauge',
        radius: '50%',
        min: 0,
        max: maxValue,
        splitNumber: 10,
        startAngle: 225,
        endAngle: -45,
        axisLine: {
          show: true,
          lineStyle: {
            width: 1,
            color: [[1, 'rgba(0,0,0,0)']]
          }
        },
        axisLabel: {
          show: true,
          color: labelColor,
          distance: 25,
          formatter: function (v: any) {
            const stepSize = maxValue / 10;
            const step = Math.round(v / stepSize) * stepSize;
            return step.toString();
          }
        },
        axisTick: {
          show: true,
          splitNumber: 7,
          lineStyle: {
            color: tickColor,
            width: 1
          },
          length: -8
        },
        splitLine: {
          show: true,
          length: -20,
          lineStyle: {
            color: tickColor
          }
        },
        detail: {
          show: false
        },
        pointer: {
          show: false
        }
      }
    ]
  };
});

onMounted(() => {
  // 确保图表可以正确响应尺寸变化
  if (chartRef.value) {
    // 延迟调用resize确保图表正确渲染
    setTimeout(() => {
      chartRef.value?.resize();
    }, 100);
  }
});
</script>

<style scoped>
.gauge-tower-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  border-radius: 8px;
}

.gauge-tower-wrapper > div {
  width: 100% !important;
  height: 100% !important;
}
</style>
